<template>
    <div class="warp">
        <div class="search-bar">
            <div class="search-item">
                <input
                    v-model="app"
                    type="test"
                    class="search-input"
                    placeholder="所属APP"
                />
            </div>
            <div class="search-item">
                <input
                    v-model="visitid"
                    type="test"
                    class="search-input"
                    placeholder="访客编号"
                />
            </div>
            <div class="search-item">
                <DatePick
                    v-model="date"
                    :placeholder="'选择日期'"
                    :readonly="true"
                />
            </div>

            <button class="btn btn-search" @click="getData">搜索</button>
            <button class="btn btn-reset" @click="resetSearch">重置</button>
        </div>
        <div class="warp-body">
            <table class="m-table">
                <thead>
                    <th>所属APP</th>
                    <th>访客编号</th>
                    <th>访客IP</th>
                    <th>最近会话时间</th>
                </thead>
                <tbody>
                    <template v-if="list.length > 0">
                        <tr
                            v-for="(item, index) in list"
                            :key="index"
                            @dblclick="showContent(item)"
                        >
                            <td>{{ item.title }}</td>
                            <td>{{ item.visitor_id }}</td>
                            <td>{{ item.ip }}</td>
                            <td>{{ formatDate(item.near_time) }}</td>
                        </tr>
                    </template>
                    <tr v-else>
                        <td colspan="3" align="center">暂无记录</td>
                    </tr>
                </tbody>
            </table>

            <!-- 分页 -->
            <div class="paging">
                <Paging v-model="page" :count="count" @change="changePage" />
            </div>
        </div>

        <!-- 聊天内容 -->
        <div class="chat-layer" v-show="showHistory" @click="hideContent">
            <div class="chat-content" id="moveChatContent" @click.stop>
                <!-- 头部 -->
                <div class="header">
                    <!-- 公司应用名称 -->
                    <div class="title">{{ historyTitle }}</div>
                    <!-- 用户名称 -->
                    <div class="user-setting" @click="getUserInfo">
                        <i id="userInfo-btn" class="iconfont icon-user"></i>
                    </div>
                </div>
                <!-- 聊天内容 -->
                <div class="content chatMessage" id="content">
                    <template v-for="(item, index) in chats">
                        <div :class="item.type">
                            <div
                                v-html="item.content"
                                :class="{ message: item.message }"
                            ></div>
                        </div>
                    </template>

                    <div class="clearfix" id="end_content"></div>
                </div>

                <!-- 用户信息 -->
                <div id="user-bar" v-show="showUserInfo">
                    <div class="user-info">
                        <div class="user-info-item">
                            <input
                                type="text"
                                name="username"
                                placeholder="姓名"
                                v-model="userInfo.username"
                            />
                        </div>
                        <div class="user-info-item">
                            <input
                                type="text"
                                name="email"
                                placeholder="邮箱"
                                v-model="userInfo.email"
                            />
                        </div>
                        <div class="user-info-item">
                            <input
                                type="text"
                                name="phone"
                                placeholder="手机"
                                v-model="userInfo.moble"
                            />
                        </div>
                        <div class="user-info-item">
                            <input
                                type="text"
                                name="qq"
                                placeholder="QQ"
                                v-model="userInfo.qq"
                            />
                        </div>
                        <div class="user-info-item">
                            <input
                                type="text"
                                name="address"
                                placeholder="地址"
                                v-model="userInfo.address"
                            />
                        </div>
                        <div class="user-info-item">
                            <textarea
                                name="remark"
                                placeholder="备注"
                                v-model="userInfo.remark"
                            ></textarea>
                        </div>
                        <div class="user-info-item">
                            <span class="user-info-btn" @click="saveUserInfo"
                                >保存</span
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="hide" style="display: none"></div>
    </div>
</template>

<script>
import Api from "page/api";
import Util from "common/util";
import { MonPaging as Paging } from "mon-util";
import { MonDatePicker as DatePick } from "mon-util";
import chatMessgaeMixins from "common/mixins/chat/messgae";
export default {
    components: {
        DatePick,
        Paging,
    },
    mixins: [chatMessgaeMixins],
    data() {
        return {
            // 搜索时间
            date: "",
            // 搜索APP
            app: "",
            // 搜索标识
            visitid: "",
            // 列表
            list: [],
            // 当前页
            page: 1,
            // 数据总数
            count: 0,
            // 是否显示聊天记录
            showHistory: false,
            // 聊天记录标题
            historyTitle: "",
            // 显示客户信息
            showUserInfo: false,
            // 用户信息
            userInfo: {},
            // 表情组件
            emoji: null,
        };
    },
    computed: {
        search() {
            let date = this.date
                ? Util.formatDate(this.date.getTime() / 1000)
                : "";
            return {
                app_title: this.app,
                visitor_id: this.visitid,
                near: date,
                page: this.page,
            };
        },
    },
    mounted() {
        this.getData();
        this.emoji = new monEmoji({
            wrapper: "#hide",
            path: window.config.emojiSetting.path,
            emoji: window.config.emojiSetting.emoji,
        });
    },
    methods: {
        // 获取数据
        getData() {
            Api.getHistory(this.search).then((result) => {
                let data = result.data;
                this.list = data.list;
                this.count = data.total;
            });
        },
        // 重置搜索
        resetSearch() {
            this.date = "";
            this.app = "";
            this.visitid = "";
            this.page = 1;
            this.count = 0;
            this.list = [];
            this.getData();
        },
        // 修改分页
        changePage(data) {
            this.page = data;
            this.getData();
        },
        // 查看聊天记录
        showContent(item) {
            // 查询获取聊天记录
            this.historyTitle = item.visitid;
            Api.pull(item.app_name, item.visitid, item.code).then((result) => {
                this.showHistory = true;
                this.initList(result.data);
                setTimeout(() => {
                    document.getElementById("moveChatContent").className =
                        "chat-content move";
                }, 20);
            });
        },
        // 关闭聊天记录
        hideContent() {
            document.getElementById("moveChatContent").className =
                "chat-content";
            setTimeout(() => {
                this.showHistory = false;
            }, 400);
        },
        // 查看用户信息
        getUserInfo() {
            if (!this.showUserInfo) {
                // 异步获取用户信息
                Api.getClientInfo(this.historyTitle).then((result) => {
                    this.userInfo = result.data;
                });
            }
            this.showUserInfo = !this.showUserInfo;
        },
        // 保存用户信息
        saveUserInfo() {
            Api.saveClientInfo(this.historyTitle, this.userInfo).then(
                (result) => {
                    this.$Toastr.send("保存客户信息成功");
                }
            );
        },
        // 初始化聊天列表
        initList(list, tips) {
            this.chats = [];
            if (tips) {
                this.chat_tips(tips);
            }
            list.forEach((item) => {
                let content = JSON.parse(item.content);
                // let time = item.create_time;
                // let ip = item.ip;
                let className = content.from == Util.getStorage("chat_kefu_uid", null, false) ? "ask" : "reply";
                let sdk = chatMessage.setPath("/static/libs/monEmoji/img/");
                let date = Util.formatDate(item.create_time, "m-d-H-i");
                let messgae = sdk.parse(content.type, content, date, className);
                this.chats.push({
                    type: className,
                    message: false,
                    content: messgae,
                });
            });
        },
        formatDate(time) {
            return Util.formatDate(time, "Y-m-d-H-i");
        },
    },
};
</script>

<style lang="less" scoped>
.warp {
    padding: 12px;
    position: relative;

    .search-bar {
        width: 100%;
        margin-bottom: 12px;

        .search-item {
            width: 200px;
            display: inline-block;
            margin-right: 14px;

            .search-input {
                display: inline-block;
                box-sizing: border-box;
                width: 100%;
                height: 32px;
                line-height: 1.5;
                padding: 4px 7px;
                font-size: 12px;
                border: 1px solid #dcdee2;
                border-radius: 4px;
                color: #515a6e;
                background-color: #fff;
                background-image: none;
                position: relative;
                cursor: text;
                transition: border 0.2s ease-in-out, background 0.2s ease-in-out,
                    box-shadow 0.2s ease-in-out;
                margin-bottom: 6px;
                outline: none;
            }
        }

        .btn {
            display: inline-block;
            padding: 4px 12px;
            border: 1px solid #eee;
            border-radius: 2px;
            cursor: pointer;
            margin-right: 8px;
            outline: none;
        }

        .btn.btn-search {
            background: #1e9fff;
            border-color: #1e9fff;
            opacity: 1;
            color: #ffffff;
        }

        .btn.btn-search:hover {
            background: #1e9fff;
            border-color: #1e9fff;
            opacity: 0.8;
        }

        .btn.btn-search:active {
            background: #1e9fff;
            border-color: #1e9fff;
            opacity: 1;
        }

        .btn.btn-reset {
            background: #ffffff;
            border-color: #bbb;
            color: #666;
        }

        .btn.btn-reset:hover {
            border-color: #666;
        }

        .btn.btn-reset:active {
            border-color: #666;
            color: #333;
        }
    }

    .m-table {
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #dcdee2;
        // text-align: center;
        text-align: left;
        width: 100%;
        // overflow: hidden;

        thead {
            background: #93daff;
            color: #333;
            vertical-align: bottom;
            border-bottom: 1px solid #dcdee2;
        }

        tbody > tr:last-child > td {
            border-bottom-width: 0;
        }

        td,
        th {
            // border-left: 1px solid #666;
            border-width: 0 0 0 1px;
            font-size: inherit;
            margin: 0;
            overflow: visible;
            padding: 0.5em 1em;
        }
        tr {
            cursor: pointer;

            &:hover {
                background: #efefef;
            }
        }
        td {
            background-color: transparent;
            border-bottom: 1px solid #dcdee2;
        }
    }

    .paging {
        margin-top: 12px;
        text-align: right;
    }

    .chat-layer {
        position: absolute;
        top: 0;
        right: 0;
        width: 800px;
        height: 640px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.4);

        .chat-content {
            float: right;
            border-left: 1px solid #f5f5f5;
            -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

            right: -588px;
            -webkit-transition: all 0.4s ease-in;
            -moz-transition: all 0.4s ease-in;
            transition: all 0.4s ease-in;
            opacity: 0;

            &.move {
                right: 0px;
                opacity: 1;
            }
            .content {
                height: 580px;
                border-bottom: 0;
            }
        }
    }
}
</style>